import React from 'react';

const Pagination = ({
    totalPages,
    currentPage,
    onPageChange,
    totalItems,
    itemsPerPage
}) => {
    // 计算当前页显示的记录范围
    const indexOfFirstComment = (currentPage - 1) * itemsPerPage;
    const indexOfLastComment = Math.min(
        indexOfFirstComment + itemsPerPage,
        totalItems
    );

    // 生成页码数组（最多显示10个页码，避免过多页码挤压界面）
    const generatePageNumbers = () => {
        const pages = [];
        // 始终显示第一页
        pages.push(1);

        // 中间页码逻辑（当前页前后各显示2页）
        for (let i = Math.max(2, currentPage - 2); i <= Math.min(totalPages - 1, currentPage + 2); i++) {
            pages.push(i);
        }

        // 始终显示最后一页（避免与第一页重复）
        if (totalPages > 1) {
            pages.push(totalPages);
        }

        // 去重并排序
        return [...new Set(pages)].sort((a, b) => a - b);
    };

    const pageNumbers = generatePageNumbers();

    return (
        <div className="mt-6 flex flex-col sm:flex-row justify-between items-center gap-4">
            {/* 记录统计信息 */}
            <div className="text-sm text-gray-600">
                显示第 {indexOfFirstComment + 1} 到 {indexOfLastComment} 条，共 {totalItems} 条评论
            </div>

            {/* 分页按钮 */}
            <div className="flex items-center space-x-1">
                {/* 上一页 */}
                <button
                    onClick={() => onPageChange(currentPage - 1)}
                    disabled={currentPage === 1}
                    className="px-3 py-1.5 border border-gray-300 rounded-md bg-white text-sm text-gray-700 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
                >
                    上一页
                </button>

                {/* 页码 */}
                {pageNumbers.map((number, index) => (
                    // 为每个片段添加唯一key
                    <React.Fragment key={`pagination-${number}`}>
                        {index > 0 && pageNumbers[index] - pageNumbers[index - 1] > 1 && (
                            <span key={`ellipsis-${index}`} className="px-2 text-gray-400">...</span>
                        )}
                        <button
                            onClick={() => onPageChange(number)}
                            className={`px-3 py-1.5 border rounded-md text-sm font-medium transition-colors ${number === currentPage
                                    ? 'border-blue-500 bg-blue-50 text-blue-600'
                                    : 'border-gray-300 bg-white text-gray-700 hover:bg-gray-50'
                                }`}
                        >
                            {number}
                        </button>
                    </React.Fragment>
                ))}

                {/* 下一页 */}
                <button
                    onClick={() => onPageChange(currentPage + 1)}
                    disabled={currentPage === totalPages}
                    className="px-3 py-1.5 border border-gray-300 rounded-md bg-white text-sm text-gray-700 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
                >
                    下一页
                </button>
            </div>
        </div>
    );
};

export default Pagination;